<template>
	<view class="gui-relative" style="height:100vh;">
		<view class="gui-margin">
			<view class="">
				<view class="hulu-course-card" v-for="(g,ind) in activities" :key="ind">
					<view class="course-lft">
						<view class="lft-img">
							<image :src="g.Activity.post" style="will-change: transform;" mode="widthFix"></image>
							<text class="gui-text-center gui-text-small hulu-bg-primary-color1 hulu-primary-color">
								{{g.Activity.title}}
							</text>
						</view>

					</view>
					<view class="course-ct">
						<view class="ct-title">
							<text class="ct-name">{{g.Activity.Groupcourse.name}}</text>
							<view class="ct-ticket" :style="{backgroundColor:g.Activity.Groupcourse.color}">
							</view>
						</view>
						<view class="">
							<u-rate v-model="g.Activity.Groupcourse.intensity" count="5" readonly activeColor="#ffa502"></u-rate>
						</view>
						<view class="gui-text-small">
							{{g.Activity.Groupcourse.calorie}}焦
						</view>
						<view class="">
							<text class="content-second">
								时间：{{g.Activity.start_time}}
							</text>
						</view>

					</view>
					<view class="course-rgt">
						<text class="gui-text-small">
							{{g.Activity.Groupcourse.duration}}
							min
						</text>
					</view>

				</view>
				
			</view>
			<view class="" style="height:88rpx;">

			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import useUser from '@/api/user'
	const { getUserActivity, activities } = useUser()
	getUserActivity()
</script>

<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}

	.active {
		color: #2A82E4;
		background-color: #C2DEFF;
	}

	.coursegroup,
	.coursepersonal {
		line-height: 54rpx;
		height: 54rpx;
		padding: 10rpx 20rpx;
	}

	.unactive {
		color: #808080;
		background-color: #E5E5E5;
	}

	.my-btn button::after {
		border: none;
	}

	.course-rgt {
		position: relative;
	}

	.course-time {
		position: absolute;
		bottom: 4rpx;
	}

	.course-btn {
		position: absolute;
		width: 100%;
		top: 88rpx;

		.my-btn button {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-left: 0px;
			padding-right: 0px;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			border-top-left-radius: 16rpx;
			border-bottom-left-radius: 16rpx;
			border-top-right-radius: 0rpx;
			border-bottom-right-radius: 0rpx;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			line-height: 1.35;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: white;
			background-color: #11bf08;
			width: 100%;
			height: 100%;

		}

	}

	.content-second {
		font-weight: bolder;
		font-size: 20rpx;
		color: #0abf00;
		padding: 0 4rpx;
		background-color: #96e892;
	}
</style>